<template>
  <div class="seller" ref="seller">
    <div class="seller-content">
      <div class="overview">
        <h1 class="title">{{sellers.name}}</h1>
        <div class="desc border-1px">
          <span class="star">⭐⭐⭐⭐⭐</span>
          <span class="text">({{sellers.ratingCount}})</span>
          <span class="text">月售{{sellers.sellCount}}单</span>
        </div>
        <ul class="remark">
          <li class="block">
            <h2>起送价</h2>
            <div class="content">
              <span class="stress">{{sellers.minPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>商家配送</h2>
            <div class="content">
              <span class="stress">{{sellers.deliveryPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>平均配送时间</h2>
            <div class="content">
              <span class="stress">{{sellers.deliveryTime}}</span>分钟
            </div>
          </li>
        </ul>
      </div>
      <split></split>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper border-1px">
          <p class="content">{{sellers.bulletin}}</p>
        </div>
      </div>
      <split></split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic-wrapper" ref="picwrapper">
          <ul class="pic-list" ref="piclist">
            <li class="pic-item" v-for="pic in sellers.pics" :key="pic.index">
              <img :src="pic" width="120" height="90">
            </li>
          </ul>
        </div>
      </div>
      <split></split>
      <div class="info">
        <h1 class="title border-1px">商家信息</h1>
        <ul>
          <li class="info-item" v-for="info in sellers.infos" :key="info.index">{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import split from './Split'
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
  name: 'Sellers',
  components: {
    split
  },
  created () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.seller, {
        click: true
      })
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.initpicscroll()
    })
  },
  watch: {
    sellers: function () {
      this.$nextTick(function () {
        this.initpicscroll()
      })
    }
  },
  computed: {
    ...mapState({sellers: 'sellers'})
  },
  methods: {
    initpicscroll () {
      if (this.sellers.pics) {
        let picWidth = 120
        let margin = 6
        let width = (picWidth + margin) * this.$store.state.sellers.pics.length
        this.$refs.piclist.style.width = width + 'px'
        this.$nextTick(() => {
          if (!this.picscroll) {
            this.picscroll = new BScroll(this.$refs.picwrapper, {
              scrollX: true,
              eventPassthrough: 'vertical'
            })
          } else {
            this.picscroll.refresh()
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/maxin.styl'
  .seller
    position absolute
    top 3.48rem
    bottom 0
    left 0
    width 100%
    overflow hidden
    .overview
      padding .36rem
      .title
        margin-bottom .16rem
        line-height .28rem
        color rgb(7,17,27)
        font-size .28rem
      .desc
        padding-bottom .36rem
        border-1px(rgba(7,17,27,0.1))
        font-size 0
        .star
          display inline-block
          vertical-align top
          margin-right .16rem
          font-size .2rem
        .text
          display inline-block
          margin-right .24rem
          line-height .36rem
          vertical-align top
          font-size .2rem
          color rgb(77,85,93)
      .remark
        display flex
        padding-top .36rem
        .block
          flex 1
          text-align center
          border-right 1px solid rgba(7,17,27,0.1)
          &.last-child
            border none
          h2
            margin-bottom .08rem
            line-height .2rem
            font-size .2rem
            color rgb(147,153,159)
          .content
            line-height .48rem
            font-size .2rem
            color rgb(7,17,27)
            .stress
              font-size .48rem
    .bulletin
      padding .36rem .36rem 0 .36rem
      .title
        margin-bottom .16rem
        line-height .28rem
        color rgb(7,17,27)
        font-size .28rem
      .content-wrapper
        padding 0 .24rem .32rem .24rem
        border-1px(rgba(7,17,27,0.1))
        .content
          line-height .48rem
          font-size .24rem
          color rgb(240,20,20)
    .pics
      padding .36rem
      .title
        margin-bottom .24rem
        line-height .28rem
        color rgb(7,17,27)
        font-size .28rem
      .pic-wrapper
        width 100%
        overflow hidden
        white-space nowrap
        .pic-list
          font-size 0
          .pic-item
            display inline-block
            margin-right .12rem
            width 2.4rem
            height 1.8rem
            &:last-child
              margin 0
    .info
      padding .36rem .36rem 0 .36rem
      color rgb(7,17,27)
      .title
        padding-bottom .24rem
        line-height .28rem
        border-1px(rgba(7,17,27,0.1))
        font-size .28rem
      .info-item
        padding .32rem .24rem
        line-height .32rem
        border-1px(rgba(7,17,27,0.1))
        font-size .24rem
        &:last-child
          border none
</style>
